<template>
  <div class="app-container">
    <div class="mainbox">
      <dt-table
        v-loading="loading"
        :table-opts="tableOpts"
        :pagination-data="{
          total:total,
          queryParams:queryParams
        }"
        :is-column-search="false"
        @pagination="pagination"
        @handleSelectionChange="handleSelectionChange"
        @searchReset="handleReset"
        @searchChange="handleQuery"
      />
    </div>
    <addForm ref="addForm" />
    <previewFrom ref="previewFrom" />
    <!-- <position-edit ref="positionRefEdit" /> -->
  </div>
</template>

<script>
import { hasAuth } from '@/framework/utils/hasAuth'
import interfaceApi from '@/framework/api/workflow/interfaceManage/index'
import userFormApi from '@/framework/api/userDefined/userFrom'
import addForm from './components/addForm.vue'
import {getAppMagList} from '@/framework/api/applicationMag/applicationMag'
import previewFrom from './components/previewForm.vue'
// import positionEdit from './components/positionEdit.vue'
export default {
  name: 'FlowCustomForm',
  dicts: ['user_status'],
  components: {
    // positionEdit
    addForm,
    previewFrom
  },
  data() {
    return {
      hasAuth: hasAuth('ORG_POSITION_UPDATE_STATUS'),
      tableOpts: {
        tableData: [
        ],
        rowKey: 'customerFormCode',
        toolbarBtn: [
          {
            label: '新建表单',
            permission: ['FLOWCUSTOMFORM_ADD_BUTTON'],
            type: 'primary',
            click: (type) => {
              this.createPositionInfo()
            }
          }
        ],
        firstTableCol: {
          select: true,
          width: 55,
          type: 'selection'
        },
        tableCol: [
          {
            prop: 'customerFormName',
            label: '表单名称',
            show: true,
            search: true
          },
          {
            prop: 'customerFormCode',
            label: '表单编码',
            show: true,
            search: true
          },
          {
            prop: 'appName',
            label: '所属应用',
            show: true
          },
          {
            prop: 'appCode',
            label: '所属应用',
            show: false,
            search: true,
            type: 'dict',
            selectValue: 'appCode',
            selectLabel: 'appName',
            formatter: () => {
              return this.appList
            }
          },
          {
            prop: 'updateTime',
            label: '最近修改时间',
            show: true
          },
          {
            prop: 'updateUserName',
            label: '最近修改人',
            show: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            show: true
          },
          {
            prop: 'createUserName',
            label: '创建人',
            show: true
          }

        ],
        operator: {
          width: 292,
          operatorBtn: [
            {
              text: '修改',
              size: 'small',
              permission: ['FLOWCUSTOMFORM_UPDATE_BUTTON'],
              click: (row, col, cellValue) => { return this.editPositionInfo(row) }
            },
            {
              text: '删除',
              size: 'small',
              type: 'danger',
              permission: ['FLOWCUSTOMFORM_DEL_BUTTON'],
              click: (row, col, cellValue) => { return this.removePosition(row) },
              disabledChange: (row) => {
                return row.currentUserCreated == 'N'
              }

            },
            {
              text: '预览',
              size: 'small',
              click: (row, col, cellValue) => { return this.preview(row) }
            }
          ]
        }
      },
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        customerFormName: '',
        appCode: '',
        customerFormCode: ''
      },
      multipleSelection: [],
      appList: [],
      loading: false
    }
  },
  created() {
    this.getAppList()
    this.getList()
  },
  methods: {
    // 获取页面列表
    getList() {
      this.loading = true
      userFormApi.fetchList(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(formModel = {}) {
      this.queryParams = { ...this.queryParams, ...formModel }
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        customerFormName: '',
        appCode: '',
        customerFormCode: ''
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDetail(row) {
      this.detailOption.data = row
      this.$refs.dtDetailRef.dialogVisible = true
    },
    // 新增
    createPositionInfo() {
      this.$refs.addForm.openDialog('create')
    },
    // 修改
    editPositionInfo(row) {
      this.$refs.addForm.openDialog('update', row)
    },
    // 删除
    removePosition(row) {
      this.$dtMessageBox({ title: '提示', message: `确定要删除“${row.customerFormName}”吗?`, type: 'warning' }).then(() => {
        userFormApi.deleteForm({ customFormId: row.customFormId }).then((res) => {
          this.getList()
          this.$dtMessage({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    // 预览
    preview(row) {
      this.$refs.previewFrom.openPreview(row)
    },
    pagination() {
      this.getList()
    },
    async getAppList() {
      // const { data } = await interfaceApi.findAppList()
      const {data} =await getAppMagList({"appSourceDistinguish":2});
      this.appList = data
    },
    // 状态改变
    statusChange(row) {
      // hrPositionApi.updateStatus({
      //   statusFlag: row.statusFlag,
      //   positionId: row.positionId
      // }).then((res) => {
      //   this.getList()
      //   this.$dtMessage({
      //     title: '成功',
      //     message: '更新成功',
      //     type: 'success',
      //     duration: 2000
      //   })
      // }).catch(() => {
      //   this.getList()
      // })
    }
  }
}
</script>
